<!-- 新手引导 -->
<template>
	<view class="new-user-guide">
		<uv-popup ref="popup" mode="center" bg-color="transparent" :close-on-click-overlay="false" :duration="50" z-index="999">
			<view class="content uv-flex-column" @click="onClick">
				<view class="inner">
					<image src="/static/images/guide/figure.png" mode="widthFix"></image>
					<view class="bd uv-flex-column">
						<view class="title">{{name}}打字助教：</view>
						<view class="desc">{{content.str}}</view>
						<view class="btns uv-flex-row">
							<view class="btn btn-1 uv-flex-row">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="33" viewBox="0 0 24 33" fill="none">
									<rect x="0.5" y="0.5" width="23" height="32" rx="11.5" stroke="#BABAD8" />
									<rect width="13" height="13" fill="#F2CB29" />
									<path d="M0.5 12.5H12.5M23.5 12.5H12.5M12.5 0.5V12.5" stroke="#BABAD8" />
								</svg>
								<text>继续</text>
							</view>
							<view class="btn btn-2 uv-flex-row">
								<text>Esc</text>
								<text>跳过</text>
							</view>
							<view class="btn btn-3 uv-flex-row">
								<text>空格键</text>
								<text>快进</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
	</view>
</template>
<script setup>
	import { ref, onMounted, computed, reactive } from 'vue';
	onMounted(() => {
		init();
		bind();
	})
	const content = reactive({
		str: '',
		current: 0
	})
	const pageGuideName = {
		chapter: 'beginner-guide-CHAPTER',
		map: 'beginner-guide-MAP',
		course: 'beginner-guide-COURSE'
	}
	const name = computed(() => {
		return getApp().globalData.dzInfo.name;
	})
	const pageGuideContent = {
		chapter: [
			`欢迎加入 ${name.value}，这里包含了基础指法、中英文打字、文章打字等丰富内容等你不断挖掘打字的无穷乐趣，在今后的打字练习中，我会一直陪伴您。`,
			'每个章节的课程都包含了不同主题，可以选择需要的学习课程。如果您是零基础，就让我们从【指法从零到精通】开始探索之旅吧!'
		]
	}
	const props = defineProps({
		guideName: {
			type: String,
			default: 'chapter'
		}
	})
	const popup = ref(null);

	function keydownFun(e) {
		const { keyCode } = e;
		switch (keyCode) {
			case 27: //Esc
				close();
				break;
			case 32: //空格键
				onClick();
				break;
		}
	}

	function bind() {
		document.addEventListener('keydown', keydownFun);
	}

	function unBind() {
		document.removeEventListener('keydown', keydownFun);
	}

	function init() {
		const isGuide = uni.getStorageSync(pageGuideName[props.guideName]);
		if (!isGuide) {
			open();
			uni.setStorageSync(pageGuideName[props.guideName], 1);
		}
	}

	function onClick() {
		if (content.current >= pageGuideContent[props.guideName].length) {
			return close();
		}
		content.str = '';
		content.current++;
		stream();
	}

	async function stream() {
		const str = pageGuideContent[props.guideName][content.current];
		if (!str) {
			return close();
		}
		for (let i = 0; i < str.length; i++) {
			content.str += str[i];
			await uni.$uv.sleep(15);
		}
	}

	function open() {
		content.current = 0;
		content.str = '';
		popup.value.open();
		stream();
		bind();
	}

	function close() {
		popup.value.close();
		unBind();
	}
	defineExpose({ open })
</script>
<style>
	.new-user-guide>>>.uv-popup .uv-popup__content {
		width: 100%;
		height: 100%;
	}
	@media screen and (max-width: 800px) {
		.new-user-guide {
			display: none;
		}
	}
</style>
<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		padding-bottom: 110px;
		align-items: center;
		justify-content: flex-end;
		.inner {
			position: relative;
			width: 1056px;
			height: 190px;
			background: url('/static/images/guide/bg.png') no-repeat center center;
			background-size: 100% 100%;
			image {
				position: absolute;
				left: 18px;
				bottom: 0;
				width: 220px;
			}
			.bd {
				height: 100%;
				padding-left: 280px;
				font-size: 18px;
				color: #fff;
				.title {
					padding: 20px 0 10px;
					color: #F2CB29;
				}
				.desc {
					flex: 1;
					padding-right: 130px;
					line-height: 28px;
				}
				.btns {
					margin-bottom: 12px;
					align-items: center;
					justify-content: flex-end;
					.btn {
						height: 32px;
						margin: 0 23px;
						align-items: center;
						text {
							margin-left: 8px;
							font-size: 16px;
						}
						&-1 {
							svg {
								border-radius: 16px;
							}
						}
						&-2,
						&-3 {
							text:nth-child(1) {
								height: 32px;
								line-height: 30px;
								padding: 0 4px;
								border-radius: 6px;
								border: 1px solid #BABAD8;
							}
						}
						&-3 {
							text:nth-child(1) {
								padding: 0 20px;
							}
						}
					}
				}
			}
		}
	}
	@media screen and (max-width: 1000px) {
		.content .inner {
			width: 95%;
		}
	}
</style>